iT邦幫忙

2022 iThome 鐵人賽

DAY 25
0
Modern Web

Full Stack Web Development 網站實作系列 第 25

Day 25 GraphQL (4) - Apollo Server - Gúa ê Tâi-gí chheh tô͘-su-koán(我的台語冊圖書館) app

  • 分享至 

  • xImage
  •  

做一個圖書管理 app.
首先,建立一個 Apollo Server:
(1) 建立一個新專案(Create a new project):

mkdir GraphQL-server
cd GraphQL-server
npm init -y    

新目錄下面會有一個 package.json 檔案。

(2) 安裝套件(Install dependencies):
apollo-server -- 是 Apollo Server 本身的核心套件(library),用來定義資料型態(shape)和如何抓取資料。
graphql -- 功能是建立 GraphQL 的 schema 和執行 query。

npm install apollo-server graphql

(3)定義我們的 GraphQL 的 schema:
GraphQL server(包括 Apollo Server),都使用 schema,來定義 client 端可以查詢(query) 的資料的結構。schema 下會有不同定義的 type,所以我們稱它為 typeDefs,最基本的 GraphQL schema 是 屬於 object type。
這裡我們將建立一個可以查詢(query) 台語書籍的 app。

新增 server.js 定義我們的書籍資料:

const typeDefs = gql`
    type Author {
      name: String!
      id: ID!
      born: String!
    }
  
    type Book {
      title: String!
      published: String!
      author: String!
      id: ID!
      genres: [String!]!
    }
    
    type Query {
      bookCount: Int!
      authorCount: Int!
      allBooks: [Book!]!
    }
  `

(4)定義 data set:

let authors = [
    {
      name: '杉房之助',
      id: "afa51ab0-344d-11e9-a414-719c6709cf3e",
      born: 1952,
    },
    {
      name: '田內八百久萬',
      id: "afa5b6f0-344d-11e9-a414-719c6709cf3e",
      born: 1963
    },
    {
      name: '川合真永',
      id: "afa5b6f1-344d-11e9-a414-719c6709cf3e",
      born: 1821
    },
    { 
      name: '岩崎敬太郎', // birthyear not known
      id: "afa5b6f2-344d-11e9-a414-719c6709cf3e",
    },
    { 
      name: '小川尚義', // birthyear not known
      id: "afa5b6f3-344d-11e9-a414-719c6709cf3e",
    },
  ]
  
  let books = [
    {
      title: '新撰註解日台會話獨修',
      published: 1916,
      author: '川合真永',
      id: "afa5b6f4-344d-11e9-a414-719c6709cf3e",
      genres: ['假名']
    },
    {
      title: '日台新辭典',
      published: 1904,
      author: '杉房之助',
      id: "afa5b6f4-344d-11e9-a414-719c6709cf3e",
      genres: ['假名']
    },
    {
      title: '台灣語',
      published: 1895,
      author: '田內八百久萬',
      id: "afa5b6f5-344d-11e9-a414-719c6709cf3e",
      genres: ['假名', '漢字']
    },
    {
      title: '日台會話新編',
      published: 1899,
      author: '杉房之助',
      id: "afa5de00-344d-11e9-a414-719c6709cf3e",
      genres: ['假名']
    },
    {
      title: '埤圳用語',
      published: 1911,
      author: '岩崎敬太郎',
      id: "afa5de01-344d-11e9-a414-719c6709cf3e",
      genres: ['假名']
    },  
    {
      title: '台灣語典',
      published: 1922,
      author: '岩崎敬太郎',
      id: "afa5de02-344d-11e9-a414-719c6709cf3e",
      genres: ['假名', '白話字']
    },
    {
      title: '日台大辭典(上冊)',
      published: 1907,
      author: '小川尚義',
      id: "afa5de03-344d-11e9-a414-719c6709cf3e",
      genres: ['假名', '漢字']
    },
    {
      title: '日台大辭典(下冊)',
      published: 1907,
      author: '小川尚義',
      id: "afa5de04-344d-11e9-a414-719c6709cf3e",
      genres: ['假名', '漢字']
    },
  ]

(5)定義 resolver:

const resolvers = {
  Query: {
    bookCount: () => books.length,
    authorCount: () => authors.length,
    allBooks: () => books
  }
}

(6)建立 Apollo Server:

const { ApolloServer, gql } = require('apollo-server')
server.listen().then(({ url }) => {
  console.log(`Server ready at ${url}`)
})

(7)啟動 server:

node server.js

在 terminal 執行 node server.js 成功,會看見 Server ready at http://localhost:4000/ 訊息。


上一篇
Day 24 GraphQL (3) - Apollo Server 和 Client
下一篇
Day 26 GraphQL(5) - Apollo Server - Gúa ê Tâi-gí chheh tô͘-su-koán(我的台語冊圖書館) app(2)
系列文
Full Stack Web Development 網站實作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言